<!-- 护理项目列表页 -->
<template>
<div class="min-h serveProject bg-wt">
    <!-- 搜索框 -->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"></SearchForm>

    <TableList :data="data" :total="total" :pagination="pagination" :dataLoading="dataLoading"
      @onPageChange="onPageChange">
    </TableList>
  </div>

</template>

<script setup lang="jsx">
import TableList from './components/TableList.vue'
import { ref,onMounted } from 'vue';
import { getProjectList} from '@/api/serve'
import SearchForm from './components/SearchForm.vue'

var data = ref([])
var total = ref(0)
const dataLoading = ref(false) // 加载中
//分页对象
const pagination = ref({
  pageSize: 10,
  pageNum: 1
})

//生命周期
onMounted(() => {
  getList()
})
//获取列表数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if(val === 'name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList()
}
</script>
